<template>
    <view class="details-container">
      <scroll-view scroll-y class="scroll-area">
        <view class="content">
          <view v-if="loading" class="loading-container">
            <text class="loading-text">加载中...</text>
          </view>
  
          <template v-else>
            <!-- 状态头部卡片 -->
            <view class="card status-header">
              <view class="status-left">
                <view class="status-icon">
                  <uv-icon name="clock" :size="24" color="#FF6B35" />
                </view>
                <text class="status-text">{{ formatOll(orderDetail.status) }}</text>
              </view>
              <view class="status-right" >
                <text class="amount-label">待客户支付金额:</text>
                <text class="amount-value">¥{{ orderDetail.order_price || '' }}</text>
              </view>
            </view>
  
            <!-- 产品信息卡片 -->
            <view class="card product-card">
              <view class="product-left">
                <view class="oil-box">
                 <image :src="orderDetail.goods_image" mode="aspectFill" style="width: 100%; height: 100%;" />
                </view>
              </view>
              <view class="product-main">
                <view class="product-title">{{ orderDetail.goods_name || '' }}</view>
                <view class="product-meta">用油量：{{ orderDetail.usage || 1 }}升</view>
              </view>
             
            </view>
  
            <!-- 时间信息卡片 -->
            <view class="card time-card">
              <view class="time-row">
                <text class="time-label">下单时间：</text>
                <text class="time-value">{{
                  formatDateTime(orderDetail.order_time) || '2023.10.10 12:00'
                }}</text>
              </view>
              <view class="divider"></view>
              <view class="time-row">
                <text class="time-label">使用时间：</text>
                <text class="time-value">{{
                  formatDateTime(orderDetail.use_time) || '2023.10.10 12:00'
                }}</text>
              </view>
            </view>
  
            <!-- 凭证信息卡片 -->
            <view class="card voucher-card">
              <view class="voucher-header">
                <text class="voucher-title">凭证信息</text>
              </view>
              <view class="voucher-content">
                <view v-if="voucherImages.length === 0" class="no-voucher">
                  <text class="no-voucher-text">暂无凭证信息</text>
                </view>
                <view v-else class="voucher-images">
                  <view 
                    v-for="(image, index) in voucherImages" 
                    :key="index" 
                    class="voucher-image-wrapper"
                  >
                    <image :src="image" mode="aspectFill" class="voucher-image" />
                  </view>
                </view>
              </view>
            </view>
          </template>
        </view>
      </scroll-view>
    </view>
  </template>
  
  <script setup lang="ts">
    import { ref, onMounted } from 'vue'
    import { useRequest } from '@/api'
    import { UserInfoManager } from '@/utils/userInfo'
    import { formatDateTime } from '@/utils/dateTime'
  
    import { onLoad } from '@dcloudio/uni-app'
    const { API_JIDAN_DETAIL_GET } = useRequest()
  
    const orderId = ref('')
    const orderDetail = ref<any>({})
    const loading = ref(false)
    const voucherImages = ref<string[]>([])
  
    onLoad((options: Record<string, any>) => {
      const id = options?.id ?? options?.orderId
      if (id) {
        try {
          orderId.value = decodeURIComponent(String(id))
        } catch {
          orderId.value = String(id)
        }
        console.log('接收到的订单ID:', orderId.value)
      }
    })
  
    // 获取订单详情
    const getOrderDetail = async () => {
      if (!orderId.value) {
        uni.showToast({
          title: '订单ID不能为空',
          icon: 'none'
        })
        return
      }
      
      loading.value = true
      try {
        const params = {
          id: orderId.value,
          isdriver: UserInfoManager.lastrole()
        }
        const res = await API_JIDAN_DETAIL_GET(params)
        if (res.code === 1) {
          orderDetail.value = res.data
          // 处理凭证图片
          if (res.data.voucher) {
            voucherImages.value = res.data.voucher.split(',').filter((url: string) => url.trim())
          }
        }
      } catch (error) {
       
      } finally {
        loading.value = false
      }
    }
  
    // 格式化订单状态
    const formatOll = (status: string) => {
      const statusMap: Record<string, string> = {
        pending: '待接单',
        delivery: '配送中',
        cancelled: '已取消',
        comeon: '加油中',
        pendingpay: '待付款',
        completed: '已完成'
      }
  
      return statusMap[status] || '未知状态'
    }
  
    // 页面加载时获取参数和详情
    onMounted(() => {
      getOrderDetail()
    })
  </script>
  
  <style lang="scss" scoped>
    .details-container {
      min-height: 100vh;
      background: #f6f7f9;
      display: flex;
      flex-direction: column;
    }
  
    .loading-container {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 100rpx 0;
    }
  
    .loading-text {
      font-size: 28rpx;
      color: #999;
    }
  
    .scroll-area {
      flex: 1;
      padding: 20rpx 0;
    }
  
    .content {
      display: flex;
      flex-direction: column;
      gap: 20rpx;
      padding: 0 24rpx;
    }
  
    .card {
      background: #fff;
      border-radius: 16rpx;
      box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.06);
      padding: 24rpx;
    }
  
    // 状态头部卡片
    .status-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: linear-gradient(to bottom, #fff5e9 0%, #fff 100%);
    }
  
    .status-left {
      display: flex;
      align-items: center;
      gap: 12rpx;
    }
  
    .status-icon {
      width: 48rpx;
      height: 48rpx;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  
    .status-text {
      font-size: 32rpx;
      font-weight: 600;
    //   color: #fff;
    }
  
    .status-right {
      display: flex;
      align-items: center;
      gap: 4rpx;
    }
  
    .amount-label {
      font-size: 24rpx;
    //   color: rgba(255, 255, 255, 0.8);
    }
  
    .amount-value {
      font-size: 26rpx;
      font-weight: 700;
    //   color: #fff;
    }
  
    // 产品信息卡片
    .product-card {
      display: flex;
      align-items: center;
      gap: 16rpx;
    }
  
    .product-left {
      flex-shrink: 0;
    }
  
    .oil-box {
      width: 120rpx;
      height: 120rpx;
      border-radius: 16rpx;
      background: #fff5f0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  
    .oil-box .oil-tag {
      margin-top: 8rpx;
      font-size: 32rpx;
      font-weight: 700;
      color: #1f1f1f;
    }
  
    .product-main {
      flex: 1;
    }
  
    .product-title {
      font-size: 34rpx;
      font-weight: 700;
      color: #1f1f1f;
      margin-bottom: 8rpx;
    }
  
    .product-meta {
      font-size: 28rpx;
      color: #8c8c8c;
    }
  
    .product-price {
      font-size: 34rpx;
      font-weight: 700;
      color: #ff6b35;
    }
  
    // 时间信息卡片
    .time-card .time-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18rpx 0;
    }
  
    .time-card .divider {
      height: 1rpx;
      background: #f0f0f0;
    }
  
    .time-label {
      font-size: 28rpx;
      color: #8c8c8c;
    }
  
    .time-value {
      font-size: 30rpx;
      color: #1f1f1f;
    }
  
    // 凭证信息卡片
    .voucher-card {
      margin-bottom: 40rpx;
    }
  
    .voucher-header {
      margin-bottom: 20rpx;
    }
  
    .voucher-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #1f1f1f;
    }
  
    .voucher-content {
      min-height: 120rpx;
    }
  
    .no-voucher {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 120rpx;
    }
  
    .no-voucher-text {
      font-size: 28rpx;
      color: #999;
    }
  
    .voucher-images {
      display: flex;
      gap: 16rpx;
      flex-wrap: wrap;
    }
  
    .voucher-image-wrapper {
      width: 160rpx;
      height: 160rpx;
      border-radius: 8rpx;
      overflow: hidden;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    }
  
    .voucher-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>